import React, { Component } from 'react';
import { View } from 'react-native';

import Theme from '../../../../native-base-theme/variables/commonColor';

import TechPerformance from './tech-performance';
import LubricationStandard from './lubrication-standard';
import CorollaryEquipment from './corollary-equipment';
import ChangeRecord from './change-record';
import ChangeHistory from './change-history';
import SparePartsInventory from './spare-parts-inventory';
import ZlstIcon from '../../../../components/zlst-icons';

class TechPage extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.titleStr,
    headerStyle: { backgroundColor: Theme.toolbarDefaultBg },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerBackImage: (
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    ),
    headerRight: <View />,
  });

  _getPage = () => {
    const { type, datas } = this.props.navigation.state.params;

    let page = null;
    if (type === 'TechPerformance') {
      page = (<TechPerformance datas={datas} />
      );
    } else if (type === 'LubricationStandard') {
      page = (<LubricationStandard datas={datas} />
      );
    } else if (type === 'CorollaryEquipment') {
      page = (<CorollaryEquipment datas={datas} />
      );
    } else if (type === 'ChangeRecord') {
      page = (<ChangeRecord datas={datas} />
      );
    } else if (type === 'ChangeHistory') {
      page = (<ChangeHistory datas={datas} />
      );
    } else if (type === 'SparePartsInventory') {
      page = (<SparePartsInventory datas={datas} />
      );
    }
    return page;
  }

  render() {
    return (
      <View style={{ display: 'flex', flex: 1 }}>
        {this._getPage()}
      </View>
    );
  }
}

export default TechPage;
